<polymer-element name="webgl-globe" attributes="dataUrl dataFormat title">
  <template>
    <style>
    @host {
      * {
        /*display: none;*/
        background-color: #000;
        color: #FFF;
      }
    }
    </style>
    <h1>Title: {{title}}</h1>
    My color is {{color}}.
    <div id="container"></div>
    <script id="earthvs" type="x-shader/x-vertex">
      varying vec3 vNormal;
      varying vec2 vUv;
      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        vNormal = normalize( normalMatrix * normal );
        vUv = uv;
      }
    </script>
    <script id="earthfs" type="x-shader/x-fragment">
      uniform sampler2D texture;
      varying vec3 vNormal;
      varying vec2 vUv;
      void main() {
        vec3 diffuse = texture2D( texture, vUv ).xyz;
        float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
        gl_FragColor = vec4( diffuse + atmosphere, 1.0 );
      }
    </script>
    <script id="atmosphervs" type="x-shader/x-vertex">
      varying vec3 vNormal;
      void main() {
        vNormal = normalize( normalMatrix * normal );
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
    </script>
    <script id="atmospherefs" type="x-shader/x-fragment">
      varying vec3 vNormal;
      void main() {
        float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );
        gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;
      }
    </script>
  </template>
  <script>
  var camera = new THREE.PerspectiveCamera(45, 1.3, 0.1, 10000);
  camera.position.z = 2000;
  
  var scene = new THREE.Scene();
  var renderer = new THREE.CanvasRenderer();
  var earth;

  // var geometry = new THREE.SphereGeometry(300,20,20);
  function init(self) {
    var geometry = new THREE.IcosahedronGeometry(400, 3);
    var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
    var smaterial = new THREE.ShaderMaterial({
      uniforms: {
        texture: { type: 't', value: THREE.ImageUtils.loadTexture('world.jpg') }
      },
      vertexShader: self.$.earthvs.innerText,
      fragmentShader: self.$.earthfs.innerText
    });
    earth = new THREE.Mesh(geometry, smaterial);
    scene.add(earth);
    self.$.container.appendChild(renderer.domElement);
    resize();
    animate();
  }

  function animate() {
    requestAnimationFrame(animate);
    earth.rotation.x += 0.01;
    earth.rotation.y += 0.02;
    renderer.render(scene, camera);
  }

  function resize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }
  window.addEventListener('resize', resize, false);

  Polymer('webgl-globe', {
    dataUrl: null,
    dataFormat: 'json',
    title: 'WebGL Globe',
    color: 'data',
    camera: camera,
    scene: scene,
    ready: function() {
      init(this);
    },
    panTo: function(lat, lon) {

    },
    pause: function(seconds) {

    },
    displayText: function(text) {

    },
  });
  </script>
</polymer-element>